<template>
    <div class="body-content">
        <div>
            <section class="banner">
                <h2>联系我们</h2>
                <h4>CONTACT US</h4>
                <p>
                    您想要了解更多移民相关信息和政策？<br/>
                    匹配适合您自己的移民项目？<br/>
                    想咨询资深的移民顾问？<br/>
                    或者对我们的服务有什么建议？<br/><br/>
                    我们随时为您制定专属移民解决方案～<br/>
                    欢迎致电 0532-8861-9019<br/>
                </p>
            </section>
        </div>
        <div style="margin-top:35px;">
            <section class="subject">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <p>公司地址:</p>
                        <p>山东省青岛市崂山区双福大厦9层</p>
                    </div>
                    <div>
                        <p>电话：0532-8861-9019</p>
                        <p>邮箱：cml@cml-scl.com</p>
                    </div>
                    <div style="text-align: center;">
                        <p>公众账号WECHAT</p>
                        <div>
                            <img src="@/assets/picture/jiade-qrcode.jpg" alt="" class="qr-img">
                        </div>
                    </div>
                </div>
            </section>
            <section class="get-phone">
                <div>
                    <p>您的联系方式：</p>
                    <input type="text" class="input nm2" name="nm2" value="" placeholder="请输入姓名"  v-model="contacts">
                    <input type="number" v-model="contactsPhone"  onkeypress="return(/[0-9]/.test(String.fromCharCode(event.keyCode)))" class="input ph2" name="ph2" value="" placeholder="请输手机号">

                    <a class=" button button2" @click="save">立即提交</a>
                    <h6>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</h6>
                </div>
            </section>
        </div>
        <div class="click-box" v-if="promptshow">
            <div>
                <img src="@/assets/image/success.png" alt="" class="dui">
                <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                <span>您的私人规划师会在2小时内跟您沟通～</span>
                <p>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</p>
                <em class="xxx" @click="konwbtn">我知道了</em>
            </div>
        </div>
    </div>
</template>
<script>
import { apply} from '@/api/index' 
export default {
    data(){
        return{ 
            contacts: '',
            contactsPhone: '',
            promptshow: false,
        }
    },
    created () {

    },
    methods: {
        save(){
            if(!this.contacts){
                return this.$message.error( '请输入您的姓名')
            }
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
                return this.$message.error( '请输入手机号')
            }
            apply({
                contacts:this.contacts,
                contactsPhone:this.contactsPhone,
            }).then(res => {
                if (res.success) {
                    this.promptshow = true
                    this.$message.success('保存成功')
                    
                }
            })
        },
        konwbtn(){
            this.promptshow = false
            this.$router.go(-1)
        },
        close(){
            this.promptshow = false
        },
    },
    name: "aboutus",
}
</script>

<style lang="scss" scoped>
@import "src/assets/css/project-index";

.body-content{
    .banner {
        text-align: center;
        height: 450px;
        // background-image: url(/Public/Home/img/about/1.jpg);
        background: url('/src/assets/picture/contact.jpeg') no-repeat center;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        h2 {
            font-size: 30px;
            color: #FFFFFF;
            line-height: 1;
            padding-top: 40px;
        }
        h4{
            font-size: 18px;
            color: #F92D2D;
            line-height: 1;
            margin-top: 5px;
        }
        p {
            font-size: 16px;
            color: #FFFFFF;
            line-height: 24px;
            margin: 60px auto 0;
            width: 275px;
            text-align: left;
        }
    }
    .subject{
        width: 700px;
        margin: 0 auto;
        font-size: 16px;
    }
    .subject dt {
        float: left;
        width: 210px;
        font-size: 16px;
        color: #f92d2d;
        line-height: 32px;
        padding-bottom: 10px;
    }
    dd ul:first-child {
        margin-top: -16px;
    }
    dd ul li {
        font-size: 16px;
        color: #565A5C;
        line-height: 32px;
    }
    .qr-img {
        width: 95px;
        margin-top: 5px;
        // margin-left: -5px;
    }
    .get-phone {
        margin-top: 40px;
        width: 700px;
        margin: 40px auto;
        // background-color: #f5f5f5;
        // border-bottom: 1px #cacccd solid;
        p {
            font-size: 16px;
            color: #82888A;
            margin-bottom: 20px;
            line-height: 22px;
        }
        h6 {
            float: left;
            font-size: 12px;
            color: #CACCCD;
            line-height: 16px;
            margin-top: 5px;
            margin-bottom: 40px;
        }
        input {
            width: 220px;
            font-size: 16px;
            line-height: 45px;
            padding-left: 17.4px;
            float: left;
            margin-right: 20px;
            height: 45px;
            border: 1px solid #CACCCD;
            border-radius: 4px;
        }
        a {
            float: left;
            width: 220px;
            height: 45px;
            background: #006C2E;
            font-size: 16px;
            color: #fff;
            line-height: 45px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }
    }
}
</style>